<script lang="ts" setup>
import { onPageScroll, onReady } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent, useWebsocket, useFormat } from '@/hooks'
import { useSubPage } from './composables'
import { ref } from 'vue'
import {
  getDialogueTopicDetail,
  insertChart,
  deleteChart,
  selectChart,
  uploadAudio,
  getChat,
  defaultQuestionApi,
  newChatApi,
} from '@/services/api'
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app'
import { BASE_URL } from '@/config'
import { xmContainer } from '@/components/xm-container'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const setTitle = ref('')
const pageId = ref<Number>(0)
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
const {
  connectWebSocket,
  handleClickVideo,
  handleCloseVideo,
  base64toJson,
  webSocketSend,
  webSocketSendMp3,
  textTranslate,
  handleDebounce,
  toBase64,
} = useWebsocket()
const { encodeWAV, hexToString, buf2hex, wavViewPath } = useFormat()
const inputValue = ref('')
const ifShowInputBox = ref(false)
const subsectionValue = ref(0)
const isUnload = ref(false)
const requestStatus = ref(false)
const commentText = ref<any>('hi')
const recordList = ref<Array>([])
const animation = ref(false)
const detailObj = ref({})
const recorderManager = uni.getRecorderManager()
const innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = true
const showPopup = ref(false)
const isAnimation = ref(false)
const isHasHistory = ref(false)
const prologue = ref('')
const allTipsList = ref()
const tipsList = ref([])
const curPromptTips = ref()
const loading = ref(true)
const frameBufferList = ref([])
const playIconPng = ref('../../static/imgs/play-black.png')
const playWhiteIconPng = ref('../../static/imgs/play-white.png')
const playWhiteIconGif = ref('../../static/imgs/play_white.gif')
const playIconGif = ref('../../static/imgs/play_icon.gif')
const translateBlack = ref('../../static/imgs/icons/translate_black.png')
const translateBlue = ref('../../static/imgs/icons/translate_blue.png')
const skillsMessage = ref({
  platform: 'gpt',
  messages: [],
})
const speakValue = ref('')
const platform = ref('gpt') // gpt/kimi/qwen/rag
//声音
const sound = [
  'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/AI_xyw_learning/%E6%95%B0%E5%AD%97%E4%BA%BA/%E6%95%B0%E5%AD%97%E4%BA%BA%E8%80%81%E5%B8%88Andrew%2Bmale.mp3',
  'https://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/AI_xyw_learning/%E6%95%B0%E5%AD%97%E4%BA%BA/%E6%95%B0%E5%AD%97%E4%BA%BA%E8%80%81Jenny%2Bfemale.mp3',
]
const conversation_id = ref()
var promptSound = null
const tempFilePath = ref() //录音文件
const tempFileTime = ref() //录音文件时长
const isPlayingTitle = ref(false)
const tryList = ref([] as any)
const currentTryPlayIndex = ref()
const isBindBook = ref(false)
onShow(async () => {
  if (userStore.getBookId) {
    isBindBook.value = true
  }
  if (isBindBook.value) {
    currentPlayIndex.value = null
    recordList.value = []
    await initCoze()
    playSound()
    startWatch()
  } else {
  }
})
onLoad(async (option: any) => {
  // await initCoze()
  // playSound()
  // startWatch()
})
const playSound = () => {
  if (subsectionValue.value == 0) {
    currentPlayIndex.value = null
    recordList.value = []
    if (music) {
      music.stop()
      music = null
      // recordList.value[currentPlayIndex.value].isPlay = false
    }
  }
  if (subsectionValue.value == 1) {
    currentTryPlayIndex.value = null
    if (music) {
      music.stop()
      music = null
      // tryList.value[currentTryPlayIndex.value].isPlay = false
    }
  }
  if (promptSound) {
    promptSound.stop()
    promptSound = null
  }
  promptSound = uni.createInnerAudioContext()
  let src = sound[subsectionValue.value]
  promptSound.src = src
  console.log('开始播放')
  promptSound.play() //执行播放
  isPlayingTitle.value = true
  promptSound.onEnded(() => {
    promptSound.stop()
    isPlayingTitle.value = false
    if (subsectionValue.value == 0) {
      getDefaultQuestion()
    }
    console.log('播放结束')
  })
}
// const playSelectSound = () => {
//   if (subsectionValue.value == 0) {
//     if (music) {
//       music.stop()
//       music = null
//       recordList.value[currentPlayIndex.value].isPlay = false
//     }
//   }
//   if (subsectionValue.value == 1) {
//     if (music) {
//       music.stop()
//       music = null
//       tryList.value[currentTryPlayIndex.value].isPlay = false
//     }
//   }
//   if (promptSound) {
//     promptSound.stop()
//     promptSound = null
//   }
//   promptSound = uni.createInnerAudioContext()
//   let src = sound[subsectionValue.value]
//   promptSound.src = src
//   console.log('开始播放')
//   promptSound.play() //执行播放
//   isPlayingTitle.value = true
//   promptSound.onEnded(() => {
//     promptSound.stop()
//     isPlayingTitle.value = false
//     console.log('播放结束')
//   })
// }
const selectChange = (index) => {
  if (isBindBook.value) {
    playSound()
  }
  console.log(index, '切换')
  if (index == 1) {
    console.log(index, '清空')
    currentPlayIndex.value = null
    recordList.value = []
  }
}
let music = null
const currentPlayIndex = ref()
const onplayTitle = async (index, type) => {
  if (!isUnload.value) {
    if (subsectionValue.value == 0) {
      if (music) {
        music.stop()
        music = null
        recordList.value[currentPlayIndex.value].isPlay = false
      }
      if (promptSound) {
        promptSound.stop()
        promptSound = null
      }
      currentPlayIndex.value = index
      // Chinese中文 | English英文
      let res = await webSocketSendMp3(recordList.value[index].origin, type)
      let audioDataArray = [] as any
      let newArr: any = []
      res.map((item: string, index: any) => {
        const arrayBuffer = wx.base64ToArrayBuffer(item)
        const newBuffer = new Uint8Array(arrayBuffer)
        audioDataArray = newBuffer
      })
      const uint8Array = new Uint8Array(audioDataArray)
      const audioUrl = wx.createBufferURL(uint8Array.buffer)
      console.log('audioUrl', audioUrl)
      music = uni.createInnerAudioContext() //创建播放器对象
      music.src = audioUrl
      music.play() //执行播放
      music.onPlay(() => {
        console.log('播放中')
        recordList.value[index].isPlay = true
      })
      music.onEnded(() => {
        recordList.value[index].isPlay = false
        music.stop()
        music = null
      })
    }
    if (subsectionValue.value == 1) {
      if (music) {
        music.stop()
        music = null
        tryList.value[currentTryPlayIndex.value].isPlay = false
      }
      if (promptSound) {
        promptSound.stop()
        promptSound = null
      }
      currentTryPlayIndex.value = index
      console.log('currentTryPlayIndex.value', currentTryPlayIndex.value)
      // Chinese中文 | English英文
      let res = await webSocketSendMp3(tryList.value[index].origin, type)
      let audioDataArray = [] as any
      let newArr: any = []
      res.map((item: string, index: any) => {
        const arrayBuffer = wx.base64ToArrayBuffer(item)
        const newBuffer = new Uint8Array(arrayBuffer)
        audioDataArray = newBuffer
      })
      const uint8Array = new Uint8Array(audioDataArray)
      const audioUrl = wx.createBufferURL(uint8Array.buffer)
      console.log('audioUrl', audioUrl)
      music = uni.createInnerAudioContext() //创建播放器对象
      music.src = audioUrl
      music.play() //执行播放
      music.onPlay(() => {
        console.log('播放中')
        tryList.value[index].isPlay = true
      })
      music.onEnded(() => {
        tryList.value[index].isPlay = false
        music.stop()
        music = null
      })
    }
    // if (!isUnload.value) {
    //   clearStop()
    //   recordList.value[index].isPlay = true
    //   handleClickVideo(newUrl).then(() => {
    //     recordList.value[index].isPlay = false
    //   })
    // }
    // return newUrl
  }
}
const clearTryList = () => {
  tryList.value = []
  currentTryPlayIndex.value = null
}
//键盘输入发送
const inputConfirm = () => {
  if (promptSound) {
    promptSound.stop()
    promptSound = null
  }
  console.log(inputValue.value)
  if (subsectionValue.value == 0) {
    if (inputValue.value != '') {
      recordList.value.push({
        type: 2,
        origin: inputValue.value,
        result: '',
        filename: '',
        audio_url: '',
        ifAudio: false,
        isPlay: false,
        time: '',
      })
    }
    sendMessage(inputValue.value)
    inputValue.value = ''
  }
  if (subsectionValue.value == 1) {
    tryList.value.push({
      type: 2,
      origin: inputValue.value,
      result: '',
      filename: '',
      audio_url: '',
      ifAudio: false,
      isPlay: false,
      time: '',
    })
    // newChat(inputValue.value)
    setSkills(inputValue.value, 'user')
    inputValue.value = ''
  }
}
const newChat = async (str) => {
  const params = {
    messages: [{ content: str, role: 'system' }],
    platform: platform.value,
  }
  const data = await newChatApi(params)
  console.log('小试牛刀', data)
}
// 长按录制
const startRecord = () => {
  if (isBindBook.value) {
    if (subsectionValue.value == 0) {
      console.log('recordList.length', recordList.value.length)
      if (recordList.value.length == 0) {
        return false
      }
      if (music) {
        music.stop()
        music = null
        recordList.value[currentPlayIndex.value].isPlay = false
      }
      if (promptSound) {
        promptSound.stop()
        promptSound = null
      }
    }
    if (subsectionValue.value == 1) {
      if (music) {
        music.stop()
        music = null
        tryList.value[currentTryPlayIndex.value].isPlay = false
      }
      if (promptSound) {
        promptSound.stop()
        promptSound = null
      }
    }
    isPlayingTitle.value = false
    clearStop()
    handleCloseVideo()
    animation.value = true
    connectWebSocket().then(async (res: string) => {
      console.log('回答结束', res)
      let path = await wavViewPath(frameBufferList.value) //拿到用户的声音
      // let path = await getUserMp3()
      console.log('res', res)
      console.log('path', path)
      if (res != '') {
        if (subsectionValue.value == 0) {
          recordList.value.push({
            type: 2,
            origin: res,
            result: '',
            filename: '',
            audio_url: path,
            ifAudio: true,
            isPlay: false,
            time: tempFileTime.value,
          })
          //将当前的ai回答语句传给服务端保存
          // let params = {
          //   id: pageId.value,
          //   chat: res,
          //   role: 2,
          //   star: 1 || Number(res.fluency_score),
          //   audio_url: path,
          // }
          // insertChart(params).then((res) => {})
          // setSkills(res, 'user')
          frameBufferList.value = []
          sendMessage(res)
        }
        if (subsectionValue.value == 1) {
          tryList.value.push({
            type: 2,
            origin: res,
            result: '',
            filename: '',
            audio_url: path,
            ifAudio: true,
            isPlay: false,
            time: tempFileTime.value,
          })
          // newChat(inputValue.value)
          frameBufferList.value = []
          setSkills(res, 'user')
          //将当前的ai回答语句传给服务端保存
          // let params = {
          //   id: pageId.value,
          //   chat: res,
          //   role: 2,
          //   star: 1 || Number(res.fluency_score),
          //   audio_url: path,
          // }
          // insertChart(params).then((res) => {})
          // setSkills(res, 'user')
        }
      } else {
        uni.showToast({
          title: '未识别到文字',
          icon: 'none',
        })
        frameBufferList.value = []
      }
    })
    recorderManager.start({
      duration: 600000, // 600000（10 分钟）,默认值 60000（1 分钟）
      numberOfChannels: 1, // 录音通道数，有效值 1/2
      frameSize: 10,
      format: 'pcm', // 音频格式
      sampleRate: 16000, // 采样率
    })
  } else {
    uni.showToast({
      title: '请先绑定教材',
      icon: 'none',
    })
  }
}
// 松开停止
const endRecord = () => {
  animation.value = false
  recorderManager.stop()
  autoScroll()
}
const initCoze = async () => {
  const params = {
    messages: [
      {
        role: 'user',
        content: '早上好，今天星期几',
        content_type: 'text',
      },
    ],
  }
  const response = await uni.request({
    url: 'https://api.coze.cn/v1/conversation/create',
    method: 'POST',
    data: params,
    header: {
      abc: '123',
      Authorization:
        'Bearer pat_1ihKBjJoVB4icZRQRZJOYDTmONaVxNyjaRM9Oc9V86ucL2zyy4ojEHInW7kgJ7PF',
      'Content-Type': 'application/json',
    },
  })
  conversation_id.value = response.data.data.id
  console.log('conversation_id.value', conversation_id.value)
}
//发起对话
// const sendMessage = async () => {
//   const params = { conversation_id: '7388041285896028179' }
//   const data = {
//     bot_id: '7387366389012725812',
//     user_id: 'a1',
//     stream: true,
//     auto_save_history: true,
//     additional_messages: [
//       { role: 'user', content: '搜几个最新的军事新闻', content_type: 'text' },
//     ],
//   }
//   const response = await uni.request({
//     url: `https://api.coze.cn/v3/chat?conversation_id=${conversation_id.value}`,
//     method: 'POST',
//     data: data,
//     header: {
//       Authorization:
//         'Bearer pat_1ihKBjJoVB4icZRQRZJOYDTmONaVxNyjaRM9Oc9V86ucL2zyy4ojEHInW7kgJ7PF',
//       'Content-Type': 'application/json',
//     },
//   })
//   // if (response.data.status != '')
//   // response.data.on('data', (chunk) => {
//   //   console.log(chunk) // 处理数据块
//   // })
//   console.log('response', response.data)
// }
const getDefaultQuestion = async () => {
  const data = await defaultQuestionApi({ bookId: userStore.getBookId })
  if (data.code === 200) {
    if (data.data.status == 1) {
      recordList.value.push({
        type: 1,
        origin: data.data.content,
        result: '',
      })
      onplayTitle(0, 'Chinese', 0)
    } else {
      console.log('先去学习')
    }

    console.log('data', data)
  }
}
const sendMessage = (str) => {
  let index = recordList.value.length > 0 ? recordList.value.length - 1 : 0
  let allText = ''
  let resultStr = '' // ai返回的字符串
  // if (type == 'system') {
  //   skillsMessage.value.messages.push({
  //     content: 'Hello',
  //     role: 'user',
  //   })
  // }
  // if (type == 'user') {
  //   skillsMessage.value.messages.push({
  //     content: res,
  //     role: 'user',
  //   })
  // }
  const data = {
    bot_id: '7387366389012725812',
    user_id: 'a1',
    stream: true,
    auto_save_history: true,
    additional_messages: [{ role: 'user', content: str, content_type: 'text' }],
  }
  recordList.value.push({
    type: 1,
    origin: '',
    result: '',
    isTranslate: false,
    isPlay: false,
  })
  loadingStatus.value = 'loading'
  const requestTask = uni.request({
    url: `https://api.coze.cn/v3/chat?conversation_id=${conversation_id.value}`,
    timeout: 15000,
    responseType: 'text',
    method: 'POST',
    enableChunked: true,
    data: data,
    header: {
      Authorization:
        'Bearer pat_1ihKBjJoVB4icZRQRZJOYDTmONaVxNyjaRM9Oc9V86ucL2zyy4ojEHInW7kgJ7PF',
      'Content-Type': 'application/json',
    },
    success: async (response) => {
      onplayTitle(index + 1, 'Chinese', 0)
      // skillsMessage.value.messages.push({
      //   content: resultStr,
      //   role: 'assistant',
      // })
      //自动播放ai回答的内容
      // let mp3Path = await onplayTitle(
      //   resultStr,
      //   'English',
      //   recordList.value.length - 1
      // )
      // recordList.value[recordList.value.length - 1].audio_url = mp3Path
      // setTimeout(() => {
      //   getChatAiTag(resultStr)
      // }, 1300)
      // //将当前的ai回答语句传给服务端保存
      // let params = {
      //   id: pageId.value,
      //   chat: platform.value == 'qwen' ? allTipsList.value.text : resultStr,
      //   role: 1,
      //   star: 0,
      //   url: '',
      // }
      // insertChart(params).then((res) => {})
    },
    fail: (error) => {},
  })
  console.log('requestTask', requestTask)
  requestTask.onChunkReceived(async function (res) {
    const data16 = buf2hex(res.data) // ArrayBuffer转16进制
    const text = hexToString(data16) // 16进制转字符串
    let str = ''
    console.log('text', text)
    if (text.indexOf('event:conversation.message.delta') != -1) {
      let dataArrGpt = text
        .split('event:conversation.message.delta')
        .map((item, index) => {
          if (item != '') {
            // console.log('i', JSON.parse(item.split('data:')[1]))
            return JSON.parse(item.split('data:')[1])
          }
        })
      dataArrGpt.forEach((item, index) => {
        if (item && item.type == 'answer') {
          str = str + item.content
        }
      })

      resultStr = resultStr + str
      // resultStr.split('\n').forEach((item, index) => {
      //   if (item.indexOf('##') != -1) {
      //     recordList.value[index + 1].isTranslate = true
      //   }
      // })
      recordList.value[index + 1].origin = resultStr

      console.log(resultStr)
      // let dataArrGpt = JSON.parse(text.split('data:')[1])
      // console.log(dataArrGpt)
      // if (dataArrGpt.type == 'answer') {
      //   console.log(dataArrGpt.content)
      // }
      //   let array = dataArrGpt.map((item, index) => {
      //   if (item !== '') {
      //     // console.log('i', JSON.parse(item.split('data:')[1]))
      //     return JSON.parse(item.split('data:')[1])
      //   }
      // })
    }
    autoScroll()
    // console.log('allText', allText)
    // let dataArrGpt = allText.split('event:conversation.message.delta')
    // console.log('dataArrGpt', dataArrGpt)
    // let array = dataArrGpt.map((item, index) => {
    //   if (item !== '') {
    //     // console.log('i', JSON.parse(item.split('data:')[1]))
    //     return JSON.parse(item.split('data:')[1])
    //   }
    // })
    // console.log('array', array)
    // switch (platform.value) {
    //   case 'gpt':
    //     let gptStr = ''
    //     allText += text
    //     // console.log(allText)
    //     if (allText.indexOf('[DONE]') != -1) {
    //       let dataArrGpt = allText.split('data:')
    //       dataArrGpt.map((item, index) => {
    //         if (item != '' && item.indexOf('[DONE]') == -1) {
    //           let obj = JSON.parse(item)
    //           gptStr += ![undefined].includes(obj.choices[0].delta.content)
    //             ? obj.choices[0].delta.content
    //             : ''
    //         }
    //       })
    //       resultStr = gptStr
    //       const streamOutput = () => {
    //         console.log(gptStr.length, index, 'gptStrgptStrgptStrgptStrgptStr')
    //         if (index != gptStr.length) {
    //           let currentText = gptStr.substring(0, index + 1)
    //           index++
    //           recordList.value[recordList.value.length - 1].origin = currentText
    //         } else {
    //           loadingStatus.value = 'none'
    //           clearInterval(timer)
    //         }
    //       }
    //       let timer = setInterval(streamOutput, 30)
    //       autoScroll()
    //       break
    //     }
    // }
    // autoScroll()
  })
}
const changeBtn = () => {
  if (isBindBook.value) {
    ifShowInputBox.value = !ifShowInputBox.value
  } else {
    uni.showToast({
      title: '请先绑定教材',
      icon: 'none',
    })
  }
}
const handleClose = () => {
  showPopup.value = false
}
const loadingStatus = ref('none')
const handleClick = (type: string, value: string, index, source) => {
  switch (type) {
    case 'reload':
      if (loadingStatus.value == 'loading') {
        uni.showToast({
          title: 'Ai回复中...',
          icon: 'none',
        })
        return
      }
      handleCloseVideo()
      isAnimation.value = true
      handleDebounce(() => {
        deleteChart(pageId.value).then((res) => {
          const { code, data } = res
          if (code === 0) {
            isAnimation.value = false
            recordList.value = []
            tipsList.value = []
            skillsMessage.value.messages = [
              {
                content: curPromptTips.value,
                role: 'system',
              },
            ]
            recordList.value.push({
              type: 1,
              origin: prologue.value,
              result: '',
              filename: '',
              isTranslate: false,
            })
            let params = {
              id: pageId.value,
              chat: prologue.value,
              role: 1,
              star: 0,
            }
            insertChart(params).then((res) => {})
            getChatAiTag(prologue.value)
            //自动播放ai第一句
            if (recordList.value.length === 1) {
              onplayTitle(recordList.value[0].origin, 'English', 0)
            }
          }
        })
      }, 500)
      break
    case 'open':
      showPopup.value = true
      break
    case 'send':
      recordList.value.push({
        type: 2,
        origin: value,
        result: '',
        isTranslate: false,
      })
      // console.log( recordList.value," recordList.value")
      //将当前的ai回答语句传给服务端保存
      let params = {
        id: pageId.value,
        chat: value,
        role: 2,
        star: 0,
      }
      insertChart(params).then((res) => {})
      tipsList.value = []
      showPopup.value = false
      setSkills(value, 'user')
      break
    case 'close':
      uni.navigateBack()
      break
    case 'play':
      if (music) {
        music.stop()
        music = null
        recordList.value[currentPlayIndex.value].isPlay = false
      }
      handleDebounce(() => {
        let strValue = value.origin || value.line
        if (![null, undefined, ''].includes(value.audio_url)) {
          if (source == 1) {
            recordList.value = recordList.value.map((item, i) => {
              return {
                ...item,
                isPlay: i === index,
              }
            })
          }
          if (source == 2) {
            tipsList.value = tipsList.value.map((item, i) => {
              return {
                ...item,
                isPlay: i === index,
              }
            })
          }
          handleClickVideo(value.audio_url).then(() => {
            if (source == 1) {
              recordList.value[index].isPlay = false
            }
            if (source == 2) {
              tipsList.value[index].isPlay = false
            }
          })
          return
        }
        webSocketSendMp3(strValue, 'English').then((res) => {
          clearStop()
          if (source == 1) {
            recordList.value = recordList.value.map((item, i) => {
              return {
                ...item,
                isPlay: i === index,
              }
            })
          }
          if (source == 2) {
            tipsList.value = tipsList.value.map((item, i) => {
              return {
                ...item,
                isPlay: i === index,
              }
            })
          }
          let newArr: Iterable<number> = []
          res.map((item, index) => {
            const arrayBuffer = wx.base64ToArrayBuffer(item)
            const newBuffer = new Uint8Array(arrayBuffer)
            newArr.push(...newBuffer)
          })
          let uint8Array = new Uint8Array(newArr)
          const newUrl = wx.createBufferURL(uint8Array.buffer)
          if (source == 1) {
            recordList.value[index].audio_url = newUrl
          }
          if (source == 2) {
            tipsList.value[index].audio_url = newUrl
          }
          handleClickVideo(newUrl).then(() => {
            if (source == 1) {
              recordList.value[index].isPlay = false
            }
            if (source == 2) {
              tipsList.value[index].isPlay = false
            }
          })
        })
      }, 500)
      break
    case 'fanyi':
      textTranslate(value)
        .then(
          (res) => {
            tipsList.value[index].translate = res
            tipsList.value[index].isTranslate = true
          },
          () => {
            translateLongTip()
          }
        )
        .catch(() => {
          translateLongTip()
        })
      autoScroll()
      break
  }
}
onUnload(() => {
  isUnload.value = true
  if (music) {
    music.stop()
    music = null
  }
  if (promptSound) {
    promptSound.stop()
    promptSound = null
  }
})
onHide(() => {
  // isUnload.value = true
  if (music) {
    music.stop()
    music = null
  }
  if (promptSound) {
    promptSound.stop()
    promptSound = null
  }
})
onReady(() => {
  autoScroll()
})

const goBack = () => {
  uni.navigateBack({ delta: 1 })
}
const autoScroll = () => {
  setTimeout(function () {
    uni.pageScrollTo({
      scrollTop: 10000, // 假设页面很长，滚动到一个很大的值，从而滚动到底部
      duration: 300, // 滚动动画时长，默认300ms
    })
  }, 100)
}

const init = async () => {
  const data = await getDetail(pageId.value)
  setTimeout(function () {
    loading.value = true
  }, 500)
  const isNew = await getHistoryChat()
  Promise.all([data, isNew]).then((result) => {
    skillsMessage.value.messages.push(
      {
        content: prologue.value,
        // content: 'Flora, you are the tallest in the family.',
        role: 'system',
      },
      {
        content: 'like you!',
        role: 'assistant',
      }
    )
    recordList.value.push({
      type: 1,
      origin: prologue.value,
      result: '',
      filename: '',
      isTranslate: false,
    })
    onplayTitle(prologue.value, 'English', 0) //默认第一句播放
    getChatAiTag(prologue.value)
  })
  // return
  // const isNew = await getHistoryChat()
  // Promise.all([data, isNew]).then((result) => {
  //   skillsMessage.value.messages.push({
  //     content: 'Flora, you are the tallest in the family.',
  //     role: 'system',
  //   })
  //   setSkills(base64toJson(data.tips), 'system')
  // })
}

// 获取用户历史聊天内容
const getHistoryChat = () => {
  return new Promise<void>((resolve, reject) => {
    selectChart(pageId.value).then(async (res) => {
      const { code, data } = res
      if (code === 0) {
        const chatRecord = JSON.parse(data.chatRecord)
        recordList.value = chatRecord.map((item, index) => {
          return {
            type: item.role,
            origin: item.chat,
            audio_url: item.audio_url,
          }
        })
        //自动播放ai第一句
        if (recordList.value.length === 1) {
          recordList.value[0].isPlay = true
          let mp3Path = await onplayTitle(
            recordList.value[0].origin,
            'English',
            0
          )
          recordList.value[0].audio_url = mp3Path
        }
        skillsMessage.value.messages.push({
          content: 'Hello',
          role: 'user',
        })
        recordList.value.forEach((item, index) => {
          skillsMessage.value.messages.push({
            content: item.origin,
            role: item.type == 1 ? 'assistant' : item.type == 2 ? 'user' : '',
          })
        })
        //获取三个问题对话参考
        getChatAiTag(recordList.value[recordList.value.length - 1].origin)
      } else if (code != 0) {
        resolve()
      }
    })
  })
}

const translateLongTip = () => {
  uni.showToast({
    title: '翻译内容超长',
    duration: 2000,
    icon: 'none',
  })
}

// AI进行翻译
const handleFanyi = (value: string, index: number, rag: string) => {
  textTranslate(value)
    .then(
      (res) => {
        recordList.value[index].result = res
        recordList.value[index].isTranslate = true
      },
      () => {
        // translateLongTip()
      }
    )
    .catch(() => {
      // translateLongTip()
    })
}
// 停止播放动画
const clearStop = () => {
  recordList.value = recordList.value.map((item, i) => {
    return {
      ...item,
      isPlay: false,
    }
  })
}
const setSkills = (res: string, type: string) => {
  let index = tryList.value.length
  let allText = ''
  let resultStr = '' // ai返回的字符串
  if (type == 'system') {
    skillsMessage.value.messages.push({
      content: 'Hello',
      role: 'user',
    })
  }
  if (type == 'user') {
    skillsMessage.value.messages.push({
      content: res,
      role: 'user',
    })
  }
  tryList.value.push({
    type: 1,
    origin: '',
    result: '',
    isTranslate: false,
  })
  loadingStatus.value = 'loading'
  const requestTask = uni.request({
    url: `${BASE_URL}/xxw/sp/dialogue/new_chat`,
    timeout: 15000,
    responseType: 'text',
    method: 'POST',
    enableChunked: true,
    data: skillsMessage.value,
    success: async (response) => {
      skillsMessage.value.messages.push({
        content: resultStr,
        role: 'assistant',
      })
      onplayTitle(index, 'Chinese', 0)
      //自动播放ai回答的内容
      // let mp3Path = await onplayTitle(
      //   resultStr,
      //   'English',
      //   recordList.value.length - 1
      // )
      // recordList.value[recordList.value.length - 1].audio_url = mp3Path
      // setTimeout(() => {
      //   getChatAiTag(resultStr)
      // }, 1300)
      //将当前的ai回答语句传给服务端保存
      // let params = {
      //   id: pageId.value,
      //   chat: platform.value == 'qwen' ? allTipsList.value.text : resultStr,
      //   role: 1,
      //   star: 0,
      //   url: '',
      // }
      // insertChart(params).then((res) => {})
    },
    fail: (error) => {},
  })
  requestTask.onChunkReceived(async function (res) {
    const data16 = buf2hex(res.data) // ArrayBuffer转16进制
    const text = hexToString(data16) // 16进制转字符串
    switch (platform.value) {
      case 'gpt':
        let gptStr = ''
        allText += text
        // console.log(allText)
        if (allText.indexOf('[DONE]') != -1) {
          let dataArrGpt = allText.split('data:')
          dataArrGpt.map((item, index) => {
            if (item != '' && item.indexOf('[DONE]') == -1) {
              let obj = JSON.parse(item)
              console.log(obj)
              gptStr += ![undefined].includes(obj.choices[0].delta?.content)
                ? obj.choices[0].delta.content
                : ''
            }
          })
          resultStr = gptStr
          tryList.value[index].origin = resultStr
          //         tryList.value.push({
          //   type: 1,
          //   origin:resultStr,
          //   result: '',
          //   isTranslate: false,
          // })
          // const streamOutput = () => {
          //   console.log(gptStr.length, index, 'gptStrgptStrgptStrgptStrgptStr')
          //   if (index != gptStr.length) {
          //     let currentText = gptStr.substring(0, index + 1)
          //     index++
          //     recordList.value[recordList.value.length - 1].origin = currentText
          //   } else {
          //     loadingStatus.value = 'none'
          //     clearInterval(timer)
          //   }
          // }
          // let timer = setInterval(streamOutput, 30)
          autoScroll()
          break
        }
    }
    autoScroll()
  })
}
// const setSkills = (res: string, type: string) => {
//   let index = 0
//   let allText = ''
//   let resultStr = '' // ai返回的字符串
//   if (type == 'system') {
//     skillsMessage.value.messages.push({
//       content: 'Hello',
//       role: 'user',
//     })
//   }
//   if (type == 'user') {
//     skillsMessage.value.messages.push({
//       content: res,
//       role: 'user',
//     })
//   }
//   tryList.value.push({
//     type: 1,
//     origin: '',
//     result: '',
//     isTranslate: false,
//   })
//   loadingStatus.value = 'loading'
//   const requestTask = uni.request({
//     url: `${BASE_URL}/xxw/sp/dialogue/new_chat`,
//     timeout: 15000,
//     responseType: 'text',
//     method: 'POST',
//     enableChunked: true,
//     data: skillsMessage.value,
//     success: async (response) => {
//       skillsMessage.value.messages.push({
//         content: resultStr,
//         role: 'assistant',
//       })
//       //自动播放ai回答的内容
//       let mp3Path = await onplayTitle(
//         resultStr,
//         'English',
//         recordList.value.length - 1
//       )
//       recordList.value[recordList.value.length - 1].audio_url = mp3Path
//       setTimeout(() => {
//         getChatAiTag(resultStr)
//       }, 1300)
//       //将当前的ai回答语句传给服务端保存
//       let params = {
//         id: pageId.value,
//         chat: platform.value == 'qwen' ? allTipsList.value.text : resultStr,
//         role: 1,
//         star: 0,
//         url: '',
//       }
//       insertChart(params).then((res) => {})
//     },
//     fail: (error) => {},
//   })
//   requestTask.onChunkReceived(async function (res) {
//     const data16 = buf2hex(res.data) // ArrayBuffer转16进制
//     const text = hexToString(data16) // 16进制转字符串
//     switch (platform.value) {
//       case 'gpt':
//         let gptStr = ''
//         allText += text
//         // console.log(allText)
//         if (allText.indexOf('[DONE]') != -1) {
//           let dataArrGpt = allText.split('data:')
//           dataArrGpt.map((item, index) => {
//             if (item != '' && item.indexOf('[DONE]') == -1) {
//               let obj = JSON.parse(item)
//               gptStr += ![undefined].includes(obj.choices[0].delta.content)
//                 ? obj.choices[0].delta.content
//                 : ''
//             }
//           })
//           resultStr = gptStr
//           const streamOutput = () => {
//             console.log(gptStr.length, index, 'gptStrgptStrgptStrgptStrgptStr')
//             if (index != gptStr.length) {
//               let currentText = gptStr.substring(0, index + 1)
//               index++
//               recordList.value[recordList.value.length - 1].origin = currentText
//             } else {
//               loadingStatus.value = 'none'
//               clearInterval(timer)
//             }
//           }
//           let timer = setInterval(streamOutput, 30)
//           autoScroll()
//           break
//         }
//     }
//     autoScroll()
//   })
// }
// 获取对话参考
const getChatAiTag = async (value: string) => {
  let allText = ''
  let messageData = {
    platform: platform.value,
    messages: [
      ...skillsMessage.value.messages,
      {
        content: `Provide three reference answers based on the context of the conversation.${value}.Please output in only this JSON format:[{"line"\:"one"\},{"line"\:"two"\},{"line"\:"three"\}].Do not provide content unrelated to this format.Please refrain from providing introductory text.`,
        role: 'system',
      },
    ],
  }
  let str = ''
  const requestTask = uni.request({
    url: `${BASE_URL}/enteacher/aichat`,
    timeout: 15000,
    responseType: 'text',
    method: 'POST',
    enableChunked: true,
    data: messageData,
    success: (response) => {},
    fail: (error) => {},
  })
  requestTask.onChunkReceived(function (res) {
    const uint8Array = new Uint8Array(res.data)
    let text = String.fromCharCode.apply(null, uint8Array)
    // let text = res.data
    switch (platform.value) {
      case 'gpt':
        try {
          allText += text
          if (allText.indexOf('[DONE]') != -1) {
            let dataArrGpt = allText.split('data:')
            dataArrGpt.map((item, index) => {
              if (item != '' && item.indexOf('[DONE]') == -1) {
                let obj = JSON.parse(item)
                str += ![undefined].includes(obj.choices[0].delta.content)
                  ? obj.choices[0].delta.content
                  : ''
              }
            })
            if (str.indexOf('```json') != -1) {
              let obj = str.split('```json')[1].split('```')[0]
              let newStr = obj.replace(/\\n/g, '').replace(/\\/g, '')
              tipsList.value = JSON.parse(newStr)
            } else {
              tipsList.value = JSON.parse(str)
            }
          }
        } catch (err) {
          tipsList.value = [{ line: '暂时还没有参考答案~', catch: true }]
          // getChatAiTag(value)
        }

        break
    }
  })
}
const getUserMp3 = () => {
  return new Promise<void>((resolve, reject) => {
    let newArr: Iterable<number> = []
    frameBufferList.value.map((item, index) => {
      const newBuffer = new Uint8Array(item)
      newArr.push(...newBuffer)
    })
    const uint8Array = new Uint8Array(newArr)
    let view = encodeWAV(uint8Array.buffer, 1, 16000)
    let baseData = toBase64(view.buffer, 'normal')
    let fileName = new Date().getTime()
    let obj = {
      file_name: fileName + '.wav',
      base64_file: baseData, // Base64 编码的文件内容
      project_name: 'userMp3',
    }
    uploadAudio(obj).then((res) => {
      const { message, data } = res
      if (message === 'pong') {
        resolve(data.fileUrl)
      } else {
        frameBufferList.value = []
        reject({ code: '400', msg: '未返回图片' })
      }
    })
  })
}

const startWatch = () => {
  var lastFrame: never[] = []
  recorderManager.onStop(function (res) {
    // 监听最后一帧
    webSocketSend(lastFrame, true).then((res) => {
      if (res == 'success') {
      }
    })
    let tempFile = res.tempFilePath //音频文件地址
    tempFilePath.value = tempFile
    tempFileTime.value = Math.round(res.duration / 1000)
    console.log('tempFilePath', tempFilePath)
    console.log('录音时长', res.duration)
    // #ifdef MP-WEIXIN
    const fs = uni.getFileSystemManager()
    // 评分
    fs.readFile({
      // 拿到用户自己录制的音频保存
      filePath: tempFile,
      success: (res) => {},
    })
    // #endif
  })
  recorderManager.onFrameRecorded(function (res) {
    const { frameBuffer, isLastFrame } = res
    frameBufferList.value.push(frameBuffer)
    lastFrame = frameBuffer
    // 基础
    webSocketSend(frameBuffer, isLastFrame).then((res) => {
      if (res == 'success') {
      }
    })
  })
}
const getDetail = (id) => {
  return new Promise<void>((resolve, reject) => {
    getDialogueTopicDetail({ id: id }).then((res) => {
      const { code, data } = res
      if (code === 0) {
        // setTitle.value = data.topicChinese
        // uni.setNavigationBarTitle({
        //   title: setTitle.value, // 可以根据需要设置为任意字符串
        // })
        curPromptTips.value = base64toJson(data.tips)
        //如果有历史记录，加入历史聊天记录上下文到参数
        skillsMessage.value.messages = [
          {
            content: curPromptTips.value,
            role: 'system',
          },
        ]

        if (data.prologue) {
          prologue.value = data.prologue
          detailObj.value = data
        }

        resolve(data)
      }
    })
  })
}
const playMusicSound = (index) => {}
onPageScroll((e) => {})
</script>

<template>
  <page-meta :page-style="showPopup ? 'overflow:hidden' : ''"></page-meta>
  <xm-container :loading="loading">
    <template v-slot="{ message }">
      <view class="topNav">
        <TnSubsection
          v-model="subsectionValue"
          active-color="#5155E6"
          @change="selectChange"
        >
          <TnSubsectionItem title="超能练习" />
          <TnSubsectionItem title="小试牛刀" />
        </TnSubsection>
      </view>
      <!-- 内容 -->
      <view class="page">
        <!-- 内容部分 -->
        <scroll-view
          class="tn-text-justify outscroll"
          style="padding-bottom: 180rpx"
          scroll-top="10000"
        >
          <view
            class="tn-margin-sm tn-padding-sm tn-bg-white"
            style="
              max-width: 62vw;
              border-radius: 0 20rpx 20rpx 20rpx;
              margin-left: 46rpx;
            "
          >
            <view class="flex flex-js-sb">
              <view class="mr-4 origin-box" style="min-width: 120rpx">
                <view class="title"> HI, 你好呀~ </view>

                <view>{{
                  isBindBook && subsectionValue == 0
                    ? '让我们来测测《自然拼读全能大课堂》的学习效果吧！'
                    : isBindBook && subsectionValue == 1
                      ? '快来和AI小未聊英语吧！'
                      : '请先绑定教材'
                }}</view>
              </view>
              <image
                style="display: inline-table; flex-shrink: 0"
                class="radius-50 pngStyle"
                :src="isPlayingTitle ? playIconGif : playIconPng"
              ></image>
            </view>
          </view>
          <view v-if="subsectionValue == 0">
            <view
              class="mlr-15"
              v-for="(item, index) in recordList"
              :key="index"
            >
              <view
                class="tn-flex tn-flex-row-between tn-flex-col-center"
                v-if="item.type == 1"
              >
                <view class="justify-content-item">
                  <view class="tn-flex tn-flex-col-top tn-flex-row-left">
                    <view class="tn-padding-right tn-color-black">
                      <view class="tn-flex tn-flex-col-center">
                        <view
                          class="tn-margin-sm tn-padding-sm tn-bg-white"
                          style="
                            max-width: 62vw;
                            border-radius: 0 20rpx 20rpx 20rpx;
                          "
                        >
                          <view class="flex flex-js-sb">
                            <view
                              class="mr-4 origin-box"
                              style="min-width: 120rpx"
                            >
                              <view v-if="item.origin">{{ item.origin }} </view>
                              <view v-else class="loader-40"></view>
                            </view>
                            <image
                              v-if="item.origin"
                              style="display: inline-table; flex-shrink: 0"
                              class="radius-50 pngStyle"
                              :class="item.isPlay ? 'is-translate' : ''"
                              :src="item.isPlay ? playIconGif : playIconPng"
                              @click="onplayTitle(index, 'Chinese')"
                            ></image>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="justify-content-item"></view>
              </view>
              <view
                class="tn-flex tn-flex-row-between tn-flex-col-center"
                v-if="item.type == 2"
              >
                <view class="justify-content-item"></view>
                <view class="justify-content-item">
                  <view
                    class="tn-margin-sm tn-padding-sm f-color-text flex flex-ai-center"
                    style="max-width: 62vw"
                    v-if="!item.ifAudio"
                  >
                    <view>
                      <view class="flex flex-js-sb">
                        <view class="mr-4 origin-box" style="max-width: 380rpx">
                          {{ item.origin }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="result-wrap" v-else>
                    <view class="comment-box">
                      <image
                        class="radius-50 pngStyle"
                        :class="item.isPlay ? 'is-translate' : ''"
                        :src="item.isPlay ? playWhiteIconGif : playWhiteIconPng"
                        @click="handleClick('play', item, index, 1)"
                      ></image>
                      <view class="result-bar"> {{ item.time }}"</view>
                    </view>
                  </view>
                </view>
              </view>
            </view></view
          >
          <view v-if="subsectionValue == 1">
            <view class="mlr-15" v-for="(item, index) in tryList" :key="index">
              <view
                class="tn-flex tn-flex-row-between tn-flex-col-center"
                v-if="item.type == 1"
              >
                <view class="justify-content-item">
                  <view class="tn-flex tn-flex-col-top tn-flex-row-left">
                    <view class="tn-padding-right tn-color-black">
                      <view class="tn-flex tn-flex-col-center">
                        <view
                          class="tn-margin-sm tn-padding-sm tn-bg-white"
                          style="
                            max-width: 62vw;
                            border-radius: 0 20rpx 20rpx 20rpx;
                          "
                        >
                          <view class="flex flex-js-sb">
                            <view
                              class="mr-4 origin-box"
                              style="min-width: 120rpx"
                            >
                              <view v-if="item.origin">{{ item.origin }} </view>
                              <view v-else class="loader-40"></view>
                            </view>
                            <image
                              v-if="item.origin"
                              style="display: inline-table; flex-shrink: 0"
                              class="radius-50 pngStyle"
                              :class="item.isPlay ? 'is-translate' : ''"
                              :src="item.isPlay ? playIconGif : playIconPng"
                              @click="onplayTitle(index, 'Chinese')"
                            ></image>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="justify-content-item"></view>
              </view>
              <view
                class="tn-flex tn-flex-row-between tn-flex-col-center"
                v-if="item.type == 2"
              >
                <view class="justify-content-item"></view>
                <view class="justify-content-item">
                  <view
                    class="tn-margin-sm tn-padding-sm f-color-text flex flex-ai-center"
                    style="max-width: 62vw"
                    v-if="!item.ifAudio"
                  >
                    <view>
                      <view class="flex flex-js-sb">
                        <view class="mr-4 origin-box" style="max-width: 380rpx">
                          {{ item.origin }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="result-wrap" v-else>
                    <view class="comment-box">
                      <image
                        class="radius-50 pngStyle"
                        :class="item.isPlay ? 'is-translate' : ''"
                        :src="item.isPlay ? playWhiteIconGif : playWhiteIconPng"
                        @click="handleClick('play', item, index, 1)"
                      ></image>
                      <view class="result-bar"> {{ item.time }}"</view>
                    </view>
                  </view>
                </view>
              </view>
            </view></view
          >
        </scroll-view>
        <!-- 底部按钮 -->
        <view class="footer">
          <view class="footer_main">
            <view class="talk_box" v-if="!ifShowInputBox">
              <image
                class=""
                src="../../static/images/keyboard_icon.png"
                @tap="changeBtn"
              />
              <view
                class="talk_input"
                :class="
                  (isBindBook && recordList.length !== 0) ||
                  (isBindBook && subsectionValue == 1)
                    ? ''
                    : 'disabled_input'
                "
                @touchstart.stop="startRecord"
                @touchend.stop="endRecord"
              >
                按住 说话
              </view>
            </view>
            <view class="input_box" v-if="ifShowInputBox">
              <image
                class=""
                src="../../static/images/listen_icon.png"
                @tap="ifShowInputBox = !ifShowInputBox"
              />
              <view class="input_input">
                <TnInput
                  v-model="inputValue"
                  placeholder="请输入您的问题"
                  :border="false"
                  @confirm="inputConfirm"
                  cursor-spacing="10"
                  :disabled="
                    !isBindBook ||
                    (subsectionValue == 0 && recordList.length === 0)
                  "
                />
              </view>
            </view>
          </view>
          <view
            class="clear_box"
            v-if="subsectionValue == 1"
            @tap="clearTryList"
          >
            <TnIcon name="add-square" size="60rpx" />
          </view>
        </view>
      </view>
      <!-- 提示答案 -->
      <TnPopup
        v-model="showPopup"
        class="popup-box"
        open-direction="bottom"
        :radius="30"
        top="54px"
      >
        <scroll-view class="plr-16 popup-main">
          <view class="popup-title flex flex-js-sb flex-ai-center">
            <view></view>
            <view class="font-size-16 font-color-c333 font-w-bold"
              >你可以这样说</view
            >
            <image
              class="close-icon"
              src="../../../static/imgs/close.png"
              @click="handleClose"
            ></image>
          </view>
          <view class="popup-contnet mt-6">
            <view
              style="text-align: center"
              class="mt-40"
              v-if="tipsList.length == 0"
            >
              <view class="loader">
                <view class="circle loading1"></view>
                <view class="circle loading2"></view>
                <view class="circle loading3"></view>
                <view class="circle loading4"></view>
                <view class="circle loading5"></view>
                <view class="circle loading6"></view>
                <view class="circle loading7"></view>
                <view class="circle loading8"></view>
              </view>
              <view class="mt-12 loader-text">加载中，请稍等</view>
            </view>
            <view v-else>
              <view
                class="flex-1 flex items pa-12 br-16 flex-js-sb mb-12 bg-color-white"
                v-for="(item, index) in tipsList"
                :key="index"
              >
                <view class="" v-if="!item.catch">
                  <view class="flex">
                    <view
                      class="mr-8 items-line"
                      style="word-wrap: break-word"
                      @click="handleClick('send', item.line)"
                    >
                      {{ item.line }}
                    </view>
                    <view class="flex mt-2">
                      <image
                        class="play-icon mr-6"
                        :class="item.isPlay ? 'is-translate' : ''"
                        :src="item.isPlay ? playIconGif : playIconPng"
                        mode=""
                        @click="handleClick('play', item, index, 2)"
                      >
                      </image>
                      <image
                        class="translate-icon"
                        :class="item.isTranslate ? 'is-translate' : ''"
                        :src="item.isTranslate ? translateBlue : translateBlack"
                        mode=""
                        @click="handleClick('fanyi', item.line, index)"
                      ></image>
                    </view>
                  </view>
                  <view class="split-line mtb-8" v-if="item.translate"></view>
                  <view class="mt-4" v-if="item.translate">{{
                    item.translate
                  }}</view>
                </view>
                <view v-else> {{ item.line }}</view>
              </view>
            </view>
          </view>
          <view class="popup-footer pt-10">
            <view class="footer-btn flex flex-ai-center flex-js-center">
              <image
                class="icon radius-50"
                src="../../../static/imgs/index/expert-video.png"
                @touchstart.stop="startRecord"
                @touchend.stop="endRecord"
              >
              </image>
            </view>
            <view class="font-bold font-size-14 font-color-c191919 mt-4"
              >按住说话</view
            >
          </view>
        </scroll-view>
      </TnPopup>
      <!-- 语音音阶动画 长按说话时的动画 -->
      <view class="prompt" v-if="animation">
        <section class="dots-container">
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </section>
        <text>说话中...</text>
      </view>
    </template>
  </xm-container>
</template>

<style lang="scss" scoped>
// @import './styles/index1.scss';

.page {
  position: relative;
  width: 100%;
  padding: 100rpx 0 72rpx;
  .f-color-text {
    background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
    color: white;
    border-radius: 20rpx 0 20rpx 20rpx;
  }
  .result-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-bottom: 24rpx;
    display: grid;

    .comment-box {
      max-width: 500rpx;
      background: #fff;
      display: flex;
      align-items: flex-end;
      padding: 20rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 32rpx 0 32rpx 32rpx;
    }

    image {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      margin-left: 12rpx;
      margin-right: 60rpx;
    }
  }
  .footer {
    height: 80rpx;
    position: fixed;
    bottom: 30rpx;
    width: 100%;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    .footer_main {
      flex: 1;
      height: 100%;
      background-color: #ffffff;
      border-radius: 20rpx;
      .talk_box {
        display: flex;
        align-items: center;
        padding: 0 32rpx;
        image {
          width: 50rpx;
          height: 50rpx;
        }
        .talk_input {
          flex: 1;
          height: 100%;
          text-align: center;
          line-height: 80rpx;
          font-weight: bold;
        }
        .disabled_input {
          color: #cecece !important;
        }
      }
      .input_box {
        display: flex;
        align-items: center;
        padding: 0 0 0 32rpx;
        height: 100%;
        image {
          width: 50rpx;
          height: 50rpx;
          margin-right: 20rpx;
        }
        .input_input {
          flex: 1;
          // height: 100%;
        }
      }
    }
    .clear_box {
      margin-left: 16rpx;
    }
  }
}
.topNav {
  width: 100%;
  padding: 30rpx 100rpx 0;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.pngStyle {
  width: 40rpx;
  height: 40rpx;
}

.refish {
  transition: 1s;
  transform: rotate(360deg);
}

.origin-box {
  word-wrap: wrap;
  text-align: left;
  // word-break: break-all;
  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
}

.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 200rpx;

  .iconBox {
    width: 72rpx;
    height: 72rpx;
    background: #ffffff;
    box-shadow: 0rpx 8rpx 8rpx 0rpx #f8f8f8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active-iconBox {
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
    box-shadow: 0rpx 8rpx 8rpx 0rpx #f8f8f8;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .refish {
    transition: 1s;
    transform: rotate(360deg);
  }

  .btn-item {
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    line-height: 28rpx;
    margin-top: 12rpx;
  }

  .active-btn-item {
    color: #191919;
    font-weight: 400;
    font-size: 24rpx;
    line-height: 28rpx;
    margin-top: 20rpx;
  }
}

.is-translate {
  animation: btnSpin 0.2s 0s 1;
  color: red;
}
/* 动画 */
.prompt {
  width: 100%;
  height: 80px;
  position: fixed;
  bottom: 100px;
  z-index: 99999;
  text {
    position: absolute;
    bottom: 2px;
    color: #f3a73f;
    left: calc(45%);
    animation: puls 1.5s infinite ease-in-out;
  }
}

.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: 45%;
  position: absolute;
  bottom: 0px;
  left: calc(27.5%);
  background-color: #fdedd9;
  border-radius: 20px;
}

.dot {
  height: 16px;
  width: 16px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #f3a73f;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes puls {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #f3a73f;
    box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #f9d39f;
    box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #f3a73f;
    box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
  }
}
@keyframes btnSpin {
  0% {
    scale: 0.8;
  }

  25% {
    scale: 1;
  }

  50% {
    scale: 1.2;
  }

  75% {
    scale: 1;
  }

  100% {
    scale: 0.8;
  }
}
.loader-40 {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background: #fff;
  box-shadow:
    -40rpx 0 #e8e8ff,
    40rpx 0 #e8e8ff;
  animation: shadowPulse 2s linear infinite;
  margin-left: 45rpx;
}
@keyframes shadowPulse {
  33% {
    background: #e8e8ff;
    box-shadow:
      -40rpx 0 #4b49e8,
      40rpx 0 #e8e8ff;
  }
  66% {
    background: #4b49e8;
    box-shadow:
      -40rpx 0 #e8e8ff,
      40rpx 0 #e8e8ff;
  }
  100% {
    background: #e8e8ff;
    box-shadow:
      -40rpx 0 #e8e8ff,
      40rpx 0 #4b49e8;
  }
}
</style>
